<template >
  <div v-cloak>
    <hr>
    <button @click="up">强制刷新</button>
    <h1 :ff="ff">子组件</h1>
    <!-- 作用域插槽  子组件内容 通过插槽 传递给父组件数据
       子组件定义插槽时候  通过v-bind传递数据
       父组件在template 固定属性 slot-scope="slotScoed"
       {{slotScoed.obj.msg}}
    -->
    <slot :obj="obj"
          :mykk="kk"></slot>
    <slot name="head"></slot>
    <slot name="foot"></slot>
    <!-- v-pre  让元素内部的 原样输出 -->
    <h1 v-pre>{{你是真  的美丽,hahaha}}</h1>
    <!-- v-cloak 这个指令可以隐藏未编译的 Mustache
     标签直到实例准备完毕。-->
    <h1>{{obj.msg}}</h1>
    <!-- 
      v-once
      只渲染元素和组件一次。随后的重新渲染，
      元素/组件及其所有的子节点将被视为静态内容并跳过
       -->
    <hr>
  </div>
</template>
<script>
export default {
  name: 'Ljfvue2011Zicom',
  data () {
    return {
      obj: {
        msg: "你好",
        aihao: "男"
      },
      ff: "你好",
      kk: "今天周二"
    };
  },

  mounted () {
    // 可以接受 父组件传递给子组件的自定义属性的数据
    // 不需要子组件定义props 使用this.$attrs接受
    console.log(this.$attrs)
    // 获取到除了.native 外绑定的事件
    console.log(this.$listeners)
    // this.$on("事件名",function(msg){
    //   console.log(msg)
    // })
    // 监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。
    // this.$once("事件名", function (msg) {
    //   console.log(msg)
    // })
    // 移除自定义事件监听器。
    // this.$off("事件名")
    console.log("渲染了")

  },
  created () {

  },
  beforeUpdate () {
    console.log("更新了aaa")
  },
  updated () {
    console.log("更新了")
  },
  methods: {
    up () {
      // 迫使 Vue 实例重新渲染 强制刷新
      // 会触发beforeUpdate和updated 生命周期
      console.log("13131")
      this.$forceUpdate()
    }
  },
};
</script>

<style lang="less" scoped>
</style>